<template>
<div ref="resize">
  <slot></slot>
</div>
</template>
<script setup name="x-resize">
import elementResizeDetectorMaker from "element-resize-detector";
import {onMounted} from "vue";
const emit = defineEmits(['resize']);
onMounted(() => {
  listenerWindowResize();
})

let erd = ref();
let resize = ref();
const listenerWindowResize = () => {
  // 创建实例带参数
  // 使用基于超快速滚动的方法。
  // 这是推荐的策略。
  erd.value = elementResizeDetectorMaker({
    strategy: "scroll",
    callOnAdd: true,  //callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
    //如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
    //被调用（不会阻止其被调用）
    debug: false
  });

  //监听class为staticNextMain的元素 大小变化
  //侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
  //覆盖实例选项
  if(erd.value) {
    erd.value.listenTo(resize.value, (element) => {
      let height = element.offsetHeight;
      let width = element.offsetWidth;
      emit("resize", width, height);
    });
  }
}
</script>
<style scoped>

</style>
